<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享米宝管理后台 - 设备绑定</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100">
    <div class="admin-container flex">
        <!-- Sidebar -->
        <div class="w-64 bg-gray-800 min-h-screen flex-shrink-0">
            <div class="p-4 text-white">
                <div class="flex items-center mb-6">
                    <i class="fas fa-bolt mr-2 text-yellow-400"></i>
                    <span class="text-lg font-medium">共享米宝管理系统</span>
                </div>
                
                <nav>
                    <a href="index.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-chart-line mr-2"></i> 控制台
                    </a>
                    <a href="users.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-users mr-2"></i> 用户管理
                    </a>
                    <a href="investors.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-user-tie mr-2"></i> 投资人管理
                    </a>
                    <a href="devices.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-battery-full mr-2"></i> 设备管理
                    </a>
                    <a href="revenue.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-money-bill-wave mr-2"></i> 收益管理
                    </a>
                    <a href="commission-settings.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-cog mr-2"></i> 分润设置
                    </a>
                </nav>
            </div>
        </div>

        <!-- Main content -->
        <div class="flex-grow">
            <!-- Header -->
            <header class="bg-white shadow-sm">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <h1 class="text-xl font-medium">投资人设备绑定</h1>
                    <div class="flex items-center">
                        <span class="mr-4">管理员</span>
                        <img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/40" alt="管理员头像">
                    </div>
                </div>
            </header>

            <!-- Page content -->
            <main class="container mx-auto p-4">
                <!-- Investor Info -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex items-center mb-6">
                        <img class="h-16 w-16 rounded-full mr-4" src="https://via.placeholder.com/80" alt="投资人头像">
                        <div>
                            <h2 class="text-xl font-medium">张志强</h2>
                            <div class="text-gray-500">ID: INV20230415</div>
                            <div class="text-gray-500">手机号: 13866668888</div>
                        </div>
                        <div class="ml-auto text-right">
                            <div>
                                <span class="text-gray-500">已绑定设备:</span>
                                <span class="font-medium">5台</span>
                            </div>
                            <div>
                                <span class="text-gray-500">投资人分润:</span>
                                <span class="font-medium">20%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bound Devices List -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-lg font-medium">已绑定设备</h2>
                        <button id="batch-bind-btn" class="bg-blue-500 text-white px-4 py-2 rounded-md text-sm flex items-center">
                            <i class="fas fa-plus mr-2"></i>
                            批量绑定设备
                        </button>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备SN</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">绑定时间</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">累计收益</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">MB12345</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥458.20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 device-detail-btn" data-device="MB12345">详情</a>
                                        <a href="#" class="text-red-500 device-unbind-btn" data-device="MB12345">解绑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">MB12346</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥387.50</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 device-detail-btn" data-device="MB12346">详情</a>
                                        <a href="#" class="text-red-500 device-unbind-btn" data-device="MB12346">解绑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">MB12347</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥245.80</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 device-detail-btn" data-device="MB12347">详情</a>
                                        <a href="#" class="text-red-500 device-unbind-btn" data-device="MB12347">解绑</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="flex justify-between items-center mt-6">
                        <div class="text-sm text-gray-500">
                            显示 1-5 条，共 5 条
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-500 text-white">
                                1
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Batch Bind Modal -->
                <div id="batch-bind-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">批量绑定设备</h3>
                            <button class="text-gray-500" id="close-modal-btn">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">设备SN列表</label>
                                <textarea class="w-full border border-gray-300 rounded-md px-3 py-2 h-32 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入设备SN，每行一个，例如：&#10;MB12345&#10;MB12346&#10;MB12347"></textarea>
                                <div class="text-xs text-gray-500 mt-1">每行输入一个设备SN</div>
                            </div>
                            
                            <div class="flex justify-end space-x-2 pt-4">
                                <button class="px-4 py-2 border border-gray-300 rounded-md text-sm" id="cancel-btn">
                                    取消
                                </button>
                                <button class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm" id="save-btn">
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Device Detail Modal -->
                <div id="device-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">设备详情</h3>
                            <button id="close-detail-modal" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-lg flex items-center">
                                <div class="bg-blue-100 p-3 rounded-full mr-3">
                                    <i class="fas fa-battery-full text-blue-500"></i>
                                </div>
                                <div>
                                    <div id="device-id-display" class="font-medium text-lg">设备SN: MB12345</div>
                                </div>
                            </div>
                            
                            <div class="border-t pt-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <div class="text-sm text-gray-500">绑定时间</div>
                                        <div id="device-activation" class="font-medium">2023-04-20</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">状态</div>
                                        <div id="device-status" class="font-medium text-green-600">正常</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">电量</div>
                                        <div id="device-battery" class="font-medium">95%</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">当月收益</div>
                                        <div id="device-monthly-revenue" class="font-medium text-green-600">¥45.80</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">累计收益</div>
                                        <div id="device-total-revenue" class="font-medium text-green-600">¥458.20</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="border-t pt-4 flex justify-end space-x-2">
                                <button id="close-detail-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    关闭
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript for functionality -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Modal handling
            const batchBindBtn = document.getElementById('batch-bind-btn');
            const batchBindModal = document.getElementById('batch-bind-modal');
            const closeModalBtn = document.getElementById('close-modal-btn');
            const cancelBtn = document.getElementById('cancel-btn');
            const saveBtn = document.getElementById('save-btn');
            
            // Device Detail Modal elements
            const deviceDetailModal = document.getElementById('device-detail-modal');
            const closeDetailModal = document.getElementById('close-detail-modal');
            const closeDetailBtn = document.getElementById('close-detail-btn');
            const deviceIdDisplay = document.getElementById('device-id-display');
            const deviceActivation = document.getElementById('device-activation');
            const deviceStatus = document.getElementById('device-status');
            const deviceBattery = document.getElementById('device-battery');
            const deviceMonthlyRevenue = document.getElementById('device-monthly-revenue');
            const deviceTotalRevenue = document.getElementById('device-total-revenue');
            
            // Show batch bind modal
            batchBindBtn.addEventListener('click', function() {
                batchBindModal.classList.remove('hidden');
            });
            
            // Hide batch bind modal
            function hideBatchBindModal() {
                batchBindModal.classList.add('hidden');
            }
            
            closeModalBtn.addEventListener('click', hideBatchBindModal);
            cancelBtn.addEventListener('click', hideBatchBindModal);
            
            // Handle save button
            saveBtn.addEventListener('click', function() {
                console.log('Saving batch binding...');
                hideBatchBindModal();
                // Show success notification
                alert('设备绑定成功！');
            });
            
            // Device Detail button click event
            const deviceDetailBtns = document.querySelectorAll('.device-detail-btn');
            deviceDetailBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const deviceId = this.getAttribute('data-device');
                    showDeviceDetail(deviceId);
                });
            });
            
            // Show device detail modal
            function showDeviceDetail(deviceId) {
                // In a real app, you would fetch the device details from the server
                // Here we just simulate it with some static data
                
                // Update modal content based on device ID
                deviceIdDisplay.textContent = `设备SN: ${deviceId}`;
                
                // Different data for each device for demonstration
                if (deviceId === 'MB12345') {
                    deviceActivation.textContent = '2023-04-20';
                    deviceStatus.textContent = '正常';
                    deviceBattery.textContent = '95%';
                    deviceMonthlyRevenue.textContent = '¥45.80';
                    deviceTotalRevenue.textContent = '¥458.20';
                } else if (deviceId === 'MB12346') {
                    deviceActivation.textContent = '2023-04-20';
                    deviceStatus.textContent = '正常';
                    deviceBattery.textContent = '82%';
                    deviceMonthlyRevenue.textContent = '¥38.70';
                    deviceTotalRevenue.textContent = '¥387.50';
                } else if (deviceId === 'MB12347') {
                    deviceActivation.textContent = '2023-04-20';
                    deviceStatus.textContent = '正常';
                    deviceBattery.textContent = '76%';
                    deviceMonthlyRevenue.textContent = '¥24.50';
                    deviceTotalRevenue.textContent = '¥245.80';
                }
                
                // Show the modal
                deviceDetailModal.classList.remove('hidden');
            }
            
            // Hide device detail modal
            function hideDeviceDetailModal() {
                deviceDetailModal.classList.add('hidden');
            }
            
            closeDetailModal.addEventListener('click', hideDeviceDetailModal);
            closeDetailBtn.addEventListener('click', hideDeviceDetailModal);
            
            // Device Unbind button click event
            const deviceUnbindBtns = document.querySelectorAll('.device-unbind-btn');
            deviceUnbindBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const deviceId = this.getAttribute('data-device');
                    if (confirm(`确定要解绑设备 ${deviceId} 吗？`)) {
                        console.log(`解绑设备: ${deviceId}`);
                        // 在实际项目中这里应该调用后端API进行解绑操作
                        alert(`设备 ${deviceId} 已成功解绑！`);
                    }
                });
            });
            
            // Add event listeners for links
            const links = document.querySelectorAll('a:not(.device-detail-btn):not(.device-unbind-btn)');
            links.forEach(link => {
                link.addEventListener('click', function(e) {
                    // Prevent default only for # links that don't have a real destination
                    if (this.getAttribute('href') === '#') {
                        e.preventDefault();
                        console.log('Link clicked:', this.textContent.trim());
                    }
                });
            });
        });
    </script>
</body>
</html> 